
import Layout from "./Layout"

import {Row, Col, Space, Button, Empty} from 'antd'
import FilterByCategory from "./FilterByCategory"
import FilterByPrice from "./FilterByPrice"
import { useEffect, useState } from "react"
import { useDispatch, useSelector } from "react-redux"
import {filter_products} from '../../store/actions/filter'
import ProductItem from "./ProductItem"

function Shop () {
    const dispatch = useDispatch()
    const [skip, setSkip] = useState(0)
    const [filters, setFilters] = useState({category:[],price:[]})
    const {size,data} = useSelector(state => state.filter)
    useEffect(() => {
        setSkip(0)
    },[filters])
    useEffect(() => {
        dispatch(filter_products({skip:skip,limit:4,filters:filters}))
    },[filters, skip])
    const handleOnClick = () => {
        setSkip(skip+4)
    }
    return (
        <Layout title="商场" subTitle="快来选购吧！">
            <Row>
                <Col span={4}>
                    <Space direction="vertical" size="middle">
                        <FilterByCategory handelFilter={filter => {setFilters({...filters,category:filter})}}/>
                        <FilterByPrice handelFilter={filter => {setFilters({...filters,price:filter})}}/>
                    </Space>
                    
                </Col>
                <Col span={20}>
                    <Space size="large" direction="vertical">
                    <Row gutter={[16,16]}>
                        {
                        data.map(item => (
                            <Col span={6}>
                            <ProductItem product={item} />
                            </Col>
                        ))
                        }
                        
                    </Row>
                    {
                        size < 4 ? <Empty></Empty> : <Row>
                        <Col>
                            <Button onClick={handleOnClick}>加载更多</Button>
                        </Col>
                    </Row>
                    }
                    
                    </Space>
                </Col>
            </Row>
        
            
        </Layout>
    )
}
export default Shop